/**
 * Bizcharts-柱状图1
 * @author SPY
 * @date 2020/04/17
 */

import React from 'react';
import { Space } from 'antd';
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util,
} from 'bizcharts';

const data = [
  {
    year: '1951 年',
    sales: 38,
  },
  {
    year: '1952 年',
    sales: 52,
  },
  {
    year: '1956 年',
    sales: 61,
  },
  {
    year: '1957 年',
    sales: 145,
  },
  {
    year: '1958 年',
    sales: 48,
  },
  {
    year: '1959 年',
    sales: 38,
  },
  {
    year: '1960 年',
    sales: 38,
  },
  {
    year: '1962 年',
    sales: 38,
  },
];

const cols = {
  sales: {
    tickCount: 10,
    // ticks: [ 0, 50, 100, 150, 200],
    // year: {
    //     alias: '年份',
    //     ticks: [0, 50, 100, 150, 200, 300, 500],
    // },
    alias: '销售额',
    animate: true,
  },
};

const ColumnarChart = () => {
  return (
    <div style={{ width: 1100 }}>
      <Chart
        height={400}
        data={data}
        scale={cols}
        forceFit
        padding="auto"
        background={{
          fill: '#e2e2e2', // 图表背景色
          // fillOpacity: number, // 图表背景透明度
          stroke: 'blue', // 图表边框颜色
          // strokeOpacity: number, // 图表边框透明度
          // opacity: number, // 图表整体透明度
          // lineWidth: 10, // 图表边框粗度
          radius: 10, // 图表圆角大小
        }}
        plotBackground={{
          fill: 'red', // 图表背景色
          // fillOpacity: number, // 图表背景透明度
          // stroke: string, // 图表边框颜色
          // strokeOpacity: number, // 图表边框透明度
          // opacity: number, // 图表整体透明度
          // lineWidth: number, // 图表边框粗度
          radius: 10, // 图表圆角大小
        }}
        // filter={[
        //     ['sales', (val: any) => val > 40] // 图表将会只渲染 x 字段数值大于 20 的数据
        // ]}
      >
        <div style={{ textAlign: 'center', fontSize: 16 }}>阿里销售业绩</div>
        <Axis name="year" />
        <Axis
          name="sales"
          title={
            // autoRotate: { Boolean }, // 是否需要自动旋转，默认为 true
            // offset: { Number }, // 设置标题 title 距离坐标轴线的距离
            // textStyle: {
            //     fontSize: '12',
            //     textAlign: 'center',
            //     fill: '#999',
            //     fontWeight: 'bold',
            //     rotate: { 角度 }
            // }, // 坐标轴文本属性配置
            {
              position: 'center',
              offset: 100,
              // autoRotate:false
            }
          }
          line={{
            stroke: 'dddddd',
            fill: '#ffffff',
            lineDash: [2, 2, 3],
            lineWidth: 9,
          }}
        />
        <Tooltip
        // crosshairs用于设置 tooltip 的辅助线或者辅助框
        // crosshairs={{
        //  type: "y"
        // }}
        // position='top'
        // showTitle={false}
        // title='sales'
        // shared={false}
        // enterable
        />
        <Geom
          type="interval"
          position="year*sales"
          color="l(0) 0:#ffffff 0.5:#7ec2f3 1:#1890ff"
          shape="square"
          // size={['sales', (sales)=>{
          //     console.log('sales',sales);
          //     if(sales > 80)
          //       return 30;
          //     else return 1;
          //   }]}
          tooltip={[
            'sales*year',
            (sales, year) => {
              // array
              return {
                name: '销售',
                value: year + ':' + sales,
              };
            },
          ]}
          select={[
            true,
            {
              mode: 'multiple', // 选中模式，单选、多选
              style: {
                fill: 'blue',
              }, // 选中后 shape 的样式
              cancelable: true, // 选中之后是否允许取消选中，默认允许取消选中
              animate: true, // 选中是否执行动画，默认执行动画
            },
          ]}
        />
      </Chart>
    </div>
  );
};

ColumnarChart.title = 'Bizcharts-柱状图';

export default ColumnarChart;
